<template>
	<div id="openClass-root">
		<div>
			<!-- <input type="radio" id="all" name="tab" class="hide" value="">
			<label for="all" class="item">全部</label> -->


			<el-tabs v-model="activeName" @tab-click="handleClick">
				<el-tab-pane label="全部" name="first" class="choice">
					<div
						v-for="item in 8"
						:key="item"
						class="choice-item"
					>
						<img src="/imgs/liveroom/tu04.png" class="all-img">
						<p class="duration">12月1日   19：00 至 20：30</p>
						<div class="CCTVreg">
							<h4 style="margin:0;margin-bottom:8px;">新手卖家如何玩转淘宝直播</h4>
							<div class="chat">
								<img src="/imgs/liveroom/left.png" class="chat-img">
								<small>321</small>
								<img src="/imgs/liveroom/left.png" class="chat-img">
								<small>17</small>
							</div>
							<div class="intro">
								<img src="/imgs/liveroom/tu06.png" class="photo">
								<div>
									<span>谨炎</span>
									<p class="intro-p">网店美工高级讲师</p>
								</div>
							</div>
						</div>
					</div>
				</el-tab-pane>
				<el-tab-pane label="即将开始" name="second">即将开始</el-tab-pane>
				<el-tab-pane label="直播中" name="third">直播中</el-tab-pane>
				<el-tab-pane label="已结束" name="fourth">已结束</el-tab-pane>
			</el-tabs>
		</div>
	</div>
</template>
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.4.11/lib/index.js"></script>
<script>
export default {
    data () {
		return {
			activeName: 'first',
		};
    },
}
</script>
<style scoped>
@import url("//unpkg.com/element-ui@2.4.11/lib/theme-chalk/index.css");
.choice{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-top: 10px;
}
.choice-item{
	width: 24%;
	margin-bottom: 20px;
	background-color: white;
}
.all-img{
	width: 100%;
	height: 164px;
	display: block;
}
.duration{
	background-color: black;
	padding: 11px 40px;
	font-size: 14px;
	color: white;
}
.CCTVreg{
	padding: 25px 15px;
}
.chat{
	color: #888888;
}
.chat-img{
	width: 10px;
	height: 10px;
}
small{
	margin-left: 8px;
}
small:nth-child(2){
	margin-right: 15px;
}
.intro{
	display: flex;
	margin-top: 30px;
	/* justify-content: space-between; */
}
.photo{
	width: 50px;
	height: 50px;
	border-radius: 50%;
	margin-right: 15px;
}
.intro-p{
	color: #888888;
	margin-top: 5px;
}
</style>